<template>
  <div class="yonghubox">
    <el-scrollbar class="app-container-scroll-bar">
      <el-row style="margin-top:10px;border-bottom:1px solid #e2e7eb;">
        <el-col style="font-size:20px;margin-bottom:10px;" :span="24">
          <span style="margin-left:20px;">用户管理</span>
        </el-col>
      </el-row>
      <el-row style="margin-top:30px;">
        <el-col :span="5">
          <el-card shadow="never" style="height:650px;overflow:auto;">
              <div slot="header" class="clearfix" style="height:32px;">
                <h3 style="color:#ccc;position:relative;bottom:10px;"> 
                  <i class="iconfont icon-drxx45" style="font-size:28px;color:#ccc;"></i>
                 {{chooseDept}}
                </h3>
              </div>
             <tree @handleGetUserByDep="handleGetUserByDep"></tree>
          </el-card>
        </el-col>
        <el-col :span="17"  style="margin-top:-21px;margin-left:15px;">
          <!-- <el-card shadow="never"> -->
            <listTpml :data="pageData" @onCommand="handleCommand" ref="listTpml"></listTpml>
          <!-- </el-card> -->
        </el-col>
      </el-row>
    </el-scrollbar>

    <!-- 新增用户 -->
     <add-y-h-dialog 
      ref="addyhdialog"
      @handelSuccess="refresh"
      :id="deptId">
     </add-y-h-dialog>

    <!-- 重置密码 -->
     <reset-Pasd
       ref="resetpasd"
      ></reset-Pasd>
  </div>
</template>



<script>
  import tree from './yonghu/tree.vue'
  import addYHDialog from './yonghu/addYHDialog'
  import resetPasd from './yonghu/resetPasd'
  import listTpml from "@/view/components/listTmpl";
  import { deleteUserById } from "@/service/swagger/UserController"
  export default{
    components:{
      tree,
      listTpml,
      resetPasd,
      addYHDialog
    },
    data(){
      return{
        deptId:'',
        chooseDept:'',
        pageData: {
          pageTitle: "",
          // 列表table 设置
          filterOption: [
           {
              label: "用户姓名", // label名
              paramsName: "name", // 出参name值
              defaultValue: "", // 出参默认值
              componentsName: "nameInput" // 组件名
            }
          ],
           // 列表table 设置
          listOption: {
            // 列表上部btn组
            listBtns: [
              {
                label: "新建用户",
                iconfont: "icon-folder-add",
                commandName: "adduser"
              }
            ],
            // 列表api
            listApi: {
              url: "/appcloud-portal/user/getUserList",
              type: "POST",
              params: {
                deptId: "",
              }
            },
            // 表头设置
            header: [
              {
                label: "姓名",
                propName: "name",
                align: "left"
              },
              {
                label: "用户名",
                propName: "loginName"
              },
              {
                label: "电话",
                propName: "mobile"
              },
              {
                label: "状态",
                propName: "status",
                html:(row)=>{
                  if(row.status == 1){
                    return `<span class="green">启用</span>`
                  }else{
                    return `<span class="red">禁用</span>`
                  }
                }
              },
              {
                label: "部门",
                propName: "deptName",
              },
              {
                label: "操作",
                width: "290",
                align: "right",
                btns: [{
                  label: "编辑",
                  commandName: "edit",
                }, {
                  label: "删除",
                  commandName: "deleteuser",
                },{
                  label: "重置密码",
                  commandName: "resetPas",
                }
                ],
                btnGroups: []
              }
            ]
          }
        }
      }
    },

  methods: {
      handleCommand(command, row, index) {
        if (command && this[command]) {
          this[command](row, index)
        }
      },
      handleCommand(command,row,index){
        if(command&&this[command]){
          this[command](row,index)
        }
      },
      refresh(){
        this.$refs.listTpml.search();
      },
      // 根据部门拿用户
      handleGetUserByDep(data){
        console.log(data)
          this.chooseDept = data.text
          this.deptId = data.id
          this.pageData.listOption.listApi.params.deptId = data.id
          this.refresh()
      },
      //删除用户
      deleteuser(row){
        this.$confirm('确认删除该用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteUserById(row.userId).then(ret=>{
            if(ret&&ret.code == 0){
              this.refresh()
              this.$message({type: 'success',message: '删除成功!'})
            }else{
              this.refresh()
              this.$message({type: 'error',message: '删除失败!'})
            }
          })
        })
      },
      // 编辑用户
      edit(row){
        console.log(row)
        this.$refs.addyhdialog.open('',row)
      },
      //新增用户
      adduser(){
          if(this.deptId){
            this.$refs.addyhdialog.open(this.deptId,{})
          }else{
              this.$message({message: '请先选择一个部门',type: 'error'})
          }
      },
      //重置密码
      resetPas(row){
        this.$refs.resetpasd.open(row)
      }
  }
}

</script>



<style scoped>
.yonghubox >>> .el-card{
  margin-left: 20px;
}
</style>
